﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Member/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Ovvio.Web.Areas.Member.Models.MemberModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Member</h2>
    
    <fieldset>
        <div class="wrapper">
            <div class="left" style="width:160px">Member Id</div>
            <div class="right" style="width:auto"><%= Html.Encode(Model.Id) %></div>
        </div>
        <div class=wrapper>
            <div class="left" style="width:160px">Name</div>
            <div class="right" style="width:auto"><%= Html.Encode(Model.Name) %></div>
        </div>
        <div class=wrapper>
            <div class="left" style="width:160px">Total Downline (1st Level)</div>
            <div class="right"><%= Html.Encode(Model.FirstLevelDownlineCount) %></div>
        </div>
        <div class=wrapper>
            <div class="left" style="width:160px">Total Downline (2nd Level)</div>
            <div class="right"><%= Html.Encode(Model.SecondLevelDownlineCount) %></div>
        </div>
    
    
        <%= Html.Telerik().TreeView()
        .Name("MemberTreeView")
        .ClientEvents(events => events.OnSelect("onSelect"))
        .BindTo(Model.SubMembers, mappings => 
        {
            mappings.For<Ovvio.Web.Areas.Member.Models.MemberModel>(binding => binding
                    .ItemDataBound((item, member) =>
                    {
                        item.Text = member.Name;
                        item.Value = member.Id.ToString();
                        item.Expanded = true;
                    })
                    .Children(submember => submember.SubMembers));
        })
        
    %>
    <% Html.Telerik().Window()
        .Name("UserDetailWindow")
        .Visible(false);
    %>

    </fieldset>
     <script type="text/javascript">
         function onSelect(e) {
             var memberTree = $('#MemberTreeView').data('tTreeView');
             var value = memberTree.getItemValue(e.item);
             var windowElement = $.telerik.window.create({
                 title: "User Details",
                 contentUrl: '/Member/Index/Details/' + value,
                 modal: true,
                 resizable: false,
                 draggable: true,
                 visible: true,
                 width:600,
                 height:260
             });
             windowElement.data('tWindow').center();
             
         }
    </script>
</asp:Content>

